<template>
    <div id="app">
        <el-container>

            <!--    公共头部    -->
            <el-header height="100px">
                <el-row class="header_wrap">
                    <el-col :span="4" :xs="5" :sm="5">
                        <img width="160px" :src="header_logo" alt="" />
                    </el-col>
                    <el-col :span="16" :xs="15" :sm="15">
                        <el-menu default-active="/home" class="el-menu-demo nav" background-color="transparent" text-color="#ffffff" active-text-color="#1561f6" mode="horizontal" :router="true">
                            <el-menu-item index="/home">首页</el-menu-item>
                            <el-menu-item index="/resources">广告资源</el-menu-item>
                            <el-menu-item index="/about">关于我们</el-menu-item>
                            <el-menu-item index="/job">招募英才</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="4" :xs="4" :sm="4" class="contact">
                        <el-button round class="phone_btn">
                            <span>联系我们</span>
                            <br>
                            <br>
                            <span>400-188-68188</span>
                        </el-button>
                    </el-col>
                </el-row>
            </el-header>
            <!--    公共头部    -->

            <!--    main内容    -->
            <el-main>
                <router-view></router-view>
            </el-main>
            <!--    main内容    -->

            <!--    公共尾部    -->
            <el-footer height="180px">
                <el-row class="footer1_wrap">
                    <el-col class="logo" :span="4" :xs="6" :sm="6" >
                        <img :src="logo" alt="" width="160px">
                    </el-col>
                    <el-col :span="16" :xs="14" :sm="14" class="footer_center">
                       <el-row class="footer_top">
                           <el-col :span="6">
                               <img :src="footer_01" alt="">
                               公司简介
                           </el-col>
                           <el-col :span="6">
                               <img :src="footer_02" alt="">
                               广告资源
                           </el-col>
                           <el-col :span="6">
                               <img :src="footer_03" alt="">
                               合作伙伴
                           </el-col>
                           <el-col :span="6">
                               <img :src="footer_04" alt="">
                               招募英才
                           </el-col>
                       </el-row>
                        <el-row class="footer_bottom">
                            <el-col :span="12">联系我们 400-188-18688</el-col>
                            <el-col :span="12">在线时间：9：00-22：00</el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="4" :xs="4" :sm="4" class="footer1_03">
                        <img :src="weixin" width="100px" alt="">
                        <p>关注校果微信公众号</p>
                    </el-col>
                </el-row>
            </el-footer>
            <!--    公共尾部    -->

        </el-container>
    </div>
</template>

<script>
    import footer_01 from '@/footer_01.png';
    import footer_02 from '@/footer_02.png';
    import footer_03 from '@/footer_03.png';
    import footer_04 from '@/footer_04.png';
    import header_logo from '@/header_logo.png';
    import logo from '@/logo.png';
    import weixin from '@/weixin.png';
    export default {
        data(){
            return {
                 footer_01   :footer_01
                ,footer_02   :footer_02
                ,footer_03   :footer_03
                ,footer_04   :footer_04
                ,header_logo :header_logo
                ,logo        :logo
                ,weixin      :weixin
            }
        }
        ,mounted () {
            let imgs = document.querySelectorAll('img');
            Array.from(imgs).forEach((item)=>{
                let img = new Image()
                img.onload = ()=>{
                    this.count++
                };
                img.src=item.getAttribute('src')
            })
        }
        ,created: function(){
            this.$router.push('/home');
        }
    }
</script>

<style scoped>
    #app {
        font-family: Helvetica, sans-serif;
        text-align: center;
    }

    /*  头部  */
    .el-header{
        background: url("assets/img/nav_bg.jpg") 2000px 0;
        background-size: 1920px 100px;
    }
    .header_wrap{
        max-width: 990px;
        margin: 0 auto;
        text-align: left;
    }
    .header_wrap img{
        vertical-align: middle;
    }
    .header_wrap .nav{
        width: auto;
        max-width: 552px;
        margin: 0 auto;
    }
    .header_wrap .el-menu--horizontal .el-menu-item{
        height: 100px;
        line-height: 100px;
        border-bottom-width: 3px;
        margin-left: 2.7vw;
        font-size: 1.2em;
    }
    .header_wrap .el-menu--horizontal .el-menu-item:hover{
        background: transparent!important;
    }
    .header_wrap .el-menu--horizontal .is-active{
        color:#fff!important;
        background: transparent!important;
    }
    .header_wrap .el-menu--horizontal{
        border-bottom: 0;
    }
    .header_wrap .contact{
        text-align: right;
    }
    .header_wrap .phone_btn{
        width: 136px;
        height: 44px;
        line-height: 8px;
        color: #1561f6;
        font-weight: 400;
    }
    .header_wrap .phone_btn span:nth-child(1){
         font-size: 1.6em;
     }
    .header_wrap .phone_btn span:nth-child(4){
        font-size: 0.8em;
    }
    /*  头部  */

    /*  尾部  */
    .el-footer{
        background: #000000;
        color: #ffffff;
        padding: 20px 0;
        line-height: 180px;
    }
    .footer1_wrap{
        max-width: 990px;
        margin: 0 auto;
    }
    .footer1_wrap .logo{
        text-align: left;
    }
    .footer1_wrap img{
        vertical-align: middle;
    }
    .footer1_wrap .footer_bottom{
        font-size: 1.4em;
        line-height: 1px;
        color: #999999;
        margin-top: 32px;
    }
    .footer_center{
        line-height: 120px;
        text-align: left;
    }
    .footer_top{
        height: 30px;
    }
    .footer1_03{
        line-height: 0px;
        margin-top: 28px;
        text-align: right;
    }
    .footer1_03 p{
        font-size: 0.8em;
        color: #fff;
        line-height: 1px;
    }
    /*  尾部  */
</style>
